Bottom app bar Guidelines 底部應用欄指導規則

Usage 用法

✓ 適合放置2-5個操作按鈕的介面

× 只有0-1個操作按鈕的介面

如果底部應用欄中包含刪除（Delete）等破壞性操作，建議使用 Snackbar 進行確認，並提供“撤銷（Undo）”選項。

示例展示了使用者點選刪除操作後，底部彈出的 Snackbar，允許使用者撤銷操作。

底部應用欄 ≠ 導航欄（Not a Navigation Bar）

導航欄（Navigation Bar）用於跳轉至不同頁面。底部應用欄（Bottom App Bar）可以包含頁面內操作和導航功能。

避免強制使用底部應用欄（Avoid Forcing Bottom App Bar）

當需要放置更多功能按鈕或需要特殊佈局時，建議使用其他元件，不要硬把所有功能都塞進底部應用欄。

當底部操作欄需要提供多個明確的按鈕選項時，請考慮使用自定義佈局或其他元件

× 將多個操作放到了底部工具欄中，圖示無法清晰表達它們的含義。

Anatomy 結構

1 Container 2 FAB 3 Icon Button 4 Overflow Menu

Container 容器

底部應用欄的容器負責承載所有底部應用欄元素。

FAB（懸浮操作按鈕，可選）

懸浮按鈕（FAB）的高度是80dp，會和底部應用欄的位置保持一致。

在網頁和電腦版本中，要把懸浮按鈕放在底部應用欄裡面，而不是作為獨立的按鈕，這樣可以保持介面設計的統一。

× 不要將 FAB 放置在應用欄外部，否則會影響觸控可達性。

Icon Buttons 圖示按鈕

底部應用欄最多可以包含四個圖示按鈕，包括一個溢位選單（overflow menu）按鈕。

Placement 位置

With a top app bar 搭配頂部應用欄使用

頂部和底部應用欄搭配使用時需合理分配功能按鈕位置。功能佈局建議：

導航控制元件放在頂部應用欄

溢位選單按鈕放在最右側

搜尋等功能要在 App 中保持固定位置

刪除等危險操作放在頂部應用欄

在頂部應用欄放置全域性導航

同時在底部應用欄提供操作入口

With Snackbars 與 Snackbar 搭配使用

✓ Snackbar 會顯示在底部應用欄和 FAB 上方，不影響操作。

× 需避免遮擋底部應用欄，應在其上方顯示，否則會影響按鈕點選。

Responsive Layout 響應式佈局

不同螢幕尺寸下，底部應用欄的適配方式可能不同。

Window Size Classes 視窗尺寸類別

緊湊 & 中等（Compact & Medium）：適用於大多數移動裝置。

× 在大螢幕裝置上仍然使用底部應用欄，導致使用者體驗不佳。

Density 密度

✓ 底部應用欄使用預設高度，可觸控區域符合UX規範。

× 底部應用欄高度縮小，使得按鈕難以點選。

Alignment 對齊方式

主要操作（如 FAB）應對齊到右側（trailing edge）。

次要操作（如圖示按鈕）應對齊到左側（leading edge）。

這樣的佈局可以自動適配從右到左（RTL）語言。

閱讀順序相反的語言影片從左到右

Behavior 行為

Scrolling 滾動互動

向下滾動會隱藏底部應用欄，FAB 仍保持可見。

向上滾動時，底部應用欄會重新出現，並重新附加到 FAB（如果存在）。

Transitions 過渡效果

主底部應用欄轉為次級應用欄時，FAB主圖示淡出，次級按鈕淡入左側。

切回主應用欄時：FAB次級圖示淡出，主圖示淡入。次要按鈕淡出，主按鈕淡入左側

Opening Menus 選單開啟方式

由底部應用欄生成的選單（如溢位選單），應在應用欄上方彈出，層級高於應用欄。

Elements That Cover the Bottom App Bar 可覆蓋底部應用欄的元素

底部應用欄可以被鍵盤等臨時 UI 元件覆蓋。避免將底部應用欄附加到鍵盤頂部，否則可能影響使用者操作。

✓ 鍵盤可以暫時覆蓋底部應用欄。

× 不要將底部應用欄附加到鍵盤頂部。

Interaction & style 互動與樣式

Touch 觸控

當使用者點選圖示按鈕時，會出現觸控波紋，表示互動反饋。

Cursor 游標

當懸停時，懸停指示器會出現，提供一個視覺提示，表明目的地是互動式的。當點選時（在啟用和非啟用狀態下），會出現波紋效果，向使用者顯示反饋。